<template>
	<view class="wrap">
		
		<!-- <view class="header">
			<view class="btn">
				<u-icon name="arrow-left" size="48" @click="gobtn" color="#ffffff"></u-icon>
			</view>
			<image src="/static/images/banner2.jpg" mode="widthFix" style="width: 750rpx;display: block;"></image>
		</view> -->
		<!-- <u-button @click="clear">清空列表</u-button> -->
		<view class="grid-box u-skeleton-fillet u-m-t-30">
			<u-waterfall v-model="flowList" ref="uWaterfall">
				<template v-slot:left="{leftList}">
					<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<u-lazy-load threshold="-450" border-radius="0" :image="item.image" :index="index"></u-lazy-load>
					</view>
				</template>
				<template v-slot:right="{rightList}">
					<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
						<u-lazy-load threshold="-450" border-radius="0" :image="item.image" :index="index"></u-lazy-load>
					</view>
				</template>
			</u-waterfall>
		</view>
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadStatus: 'loadmore',
				flowList: [],
				list: [
					// {
					// 	image: 'http://pic.sc.chinaz.com/Files/pic/pic9/202002/zzpic23327_s.jpg',
					// }
				],
				bannerList: []
			}
		},
		onLoad() {
			for (var i = 1; i < 40; i++) {
				this.list.push({
					image: `${this.baseURL}/waterfall/${i}.jpg`,
				})
			}
			this.flowList = this.list
			// this.addRandomData();
			
			// this.getBanner()
		},
		onReachBottom() {
			// this.loadStatus = 'loading';
			// // 模拟数据加载
			// setTimeout(() => {
			// 	this.addRandomData();
			// 	this.loadStatus = 'loadmore';
			// }, 1000)
		},
		methods: {
			// getBanner(){
			// 	// 获取banner图
			// 	return this.$u.get('User/ListBanner').then((res)=>{
			// 		res.forEach((item)=>{
			// 			item.image = this.fileURL+item.pic
			// 		})
			// 		this.bannerList = res.filter((item)=>item.state == '已启用').sort((a,b)=>{return a.order - b.order})
			// 	})
			// },
			addRandomData() {
				for(let i = 0; i < 15; i++) {
					let index = this.$u.random(0, this.list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(this.list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},
			remove(id) {
				this.$refs.uWaterfall.remove(id);
			},
			clear() {
				this.$refs.uWaterfall.clear();
			},
			gobtn(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.grid-box {
		background-color: #fff;
		margin: 0 30rpx;
		padding: 20rpx;
		border-radius: 24rpx;
		margin-top: -80rpx;
	}
	.header{
		// height: 300rpx;
		// padding-top: 44px;
		// background-image: linear-gradient(to bottom, #cae8e0, #ffffff);
	}
	.btn{
		position: absolute;
		top: 5.5%;
		left: 4%;
		z-index: 999;
	}
	.demo-warter {
		border-radius: 8px;
		margin: 8rpx;
		background-color: #e6e6e6;
		padding: 14rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 16rpx;
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.demo-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}
	
	.demo-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}
	
	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
</style>